<template>
  <!-- <div class="content-box">
  <common-header :title="title"></common-header>-->
  <div class="page-content">
    <van-field
      v-model="phoneNum"
      clearable
      type="number"
      label="手机号"
      placeholder="请输入手机号"
      required
      :error-message="phoneNumMessage"
    />

    <van-field
      ref="sms"
      v-model="sms"
      center
      clearable
      required
      label="短信验证码"
      placeholder="请输入短信验证码"
      :error-message="smsErrMessage"
      @focus="isSended"
    >
      <van-button
        slot="button"
        size="small"
        :type="smsType"
        :disabled="smsDisabled"
        @click="sendSms"
      >{{smsMessage}}</van-button>
    </van-field>
    <van-field
      v-model="password"
      clearable
      type="password"
      label="新登陆密码"
      placeholder="请输入新登陆密码"
      required
      :error-message="passwordMessage"
    />
    <div class="btnPay" @click="finish()">完成修改</div>
    <div class="care">密码规则：长度6-18位 数字、英文、特殊符号且必须包含数字及英文</div>
    <commonFooter></commonFooter>
  </div>
  <!-- </div> -->
</template>
<script>
import { commonFooter } from "common";
import { passwordReg, phoneReg } from "@/utils/regRex";
import { getMsgCodeApi, forgetPwdApi } from "@/api/user";
export default {
  name: "recharge",
  components: {
    commonFooter
  },
  destroyed() {
    this.smsDisabled = false;
    window.clearInterval(this.smsTimer);
  },
  methods: {
    isSended() {
      if (!this.isSend) {
        this.$refs.sms.blur();
        this.$toast({
          message: "请先获取验证码",
          duration: 500
        });
        return;
      }
      return false;
    },
    clearSms() {
      window.clearInterval(this.smsTimer);
      this.smsMessage = "发送短信验证码";
      this.smsType = "danger";
      this.smsDisabled = false;
    },
    sendSms() {
      this.phoneNumMessage = "";
      if (!this.phoneNum) {
        this.phoneNumMessage = "手机号不能为空";
        return;
      } else if (!phoneReg.test(this.phoneNum)) {
        this.phoneNumMessage = "手机号格式不正确";
        return;
      }
      this.isSend = true;
      // let total = 120;
      let _this = this;
      getMsgCodeApi({
        mobile: _this.phoneNum,
        type: "reset"
      }).then(res => {
        this.$toast({
          message: res.msg,
          duration: 500,
          onClose: function() {
            if (res.code == 200) {
              let total = 120;
              _this.smsTimer = window.setInterval(() => {
                _this.smsDisabled = true;
                _this.smsMessage = total + "秒之后重发";
                total -= 1;
                if (total < 0) {
                  _this.clearSms();
                }
              }, 1000);
            }
          }
        });
      });
    },
    finish() {
      let _this = this;
      this.passwordMessage = "";
      this.phoneNumMessage = "";
      this.smsErrMessage = "";

      if (!this.password) {
        this.passwordMessage = "密码不能为空";
      } else if (!passwordReg.test(this.password)) {
        this.passwordMessage = "密码格式格式不正确";
      }

      if (!this.phoneNum) {
        this.phoneNumMessage = "手机号不能为空";
      } else if (!phoneReg.test(this.phoneNum)) {
        this.phoneNumMessage = "手机号格式不正确";
      }

      if (!this.sms) {
        this.smsErrMessage = "验证码不能为空";
      } else if (
        passwordReg.test(this.password) &&
        phoneReg.test(this.phoneNum)
      ) {
        let _this = this;
        forgetPwdApi({
          mobile: _this.phoneNum,
          code: _this.sms,
          password: _this.password
        }).then(res => {
          _this.$toast({
            message: res.msg,
            duration: 500,
            onClose: function() {
              if (res.code == 200) {
                _this.$router.push("/login");
              }
            }
          });
        });
      }
    }
  },
  data() {
    return {
      title: "修改登陆密码",
      sms: "",
      smsTimer: null,
      smsDisabled: "",
      smsErrMessage: "",
      smsMessage: "发送短信验证码",
      smsType: "danger",
      smsDisabled: false,
      password: "",
      phoneNum: "",
      phoneNumMessage: "",
      accountMessage: "",
      passwordMessage: "",
      isSend: false
    };
  }
};
</script>
<style lang="less" scoped>
@import "~styles/variable.less";
</style>